<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<title>Manager Comunio</title>
	<link rel="stylesheet" href="estilo/style.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.featureList-1.0.0.js"></script>
	<style type="text/css">
	
		h3 {
			margin: 0;	
			padding: 7px 0 0 0;
			font-size: 16px;
			text-transform: uppercase;
		}

		div#feature_list {
			width: 750px;
			height: 240px;
			overflow: hidden;
			position: relative;
		}

		div#feature_list ul {
			position: absolute;
			top: 0;
			list-style: none;	
			padding: 0;
			margin: 0;
		}

		ul#tabs {
			left: 0;
			z-index: 2;
			width: 320px;
		}

		ul#tabs li {
			font-size: 12px;
			font-family: Arial;
		}
		
		ul#tabs li img {
			padding: 5px;
			border: none;
			float: left;
			margin: 10px 10px 0 0;
		}

		ul#tabs li a {
			color: #222;
			text-decoration: none;	
			display: block;
			padding: 10px;
			height: 60px;
			outline: none;
		}

		ul#tabs li a:hover {
			text-decoration: underline;
		}

		ul#tabs li a.current {
			background:  url('imagenes/feature-tab-current.png');
			color: #FFF;
		}

		ul#tabs li a.current:hover {
			text-decoration: none;
			cursor: default;
		}

		ul#output {
			right: 0;
			width: 463px;
			height: 240px;
			position: relative;
		}

		ul#output li {
			position: absolute;
			width: 463px;
			height: 240px;
		}

		ul#output li a {
			position: absolute;
			bottom: 10px;
			right: 10px;
			padding: 8px 12px;
			text-decoration: none;
			font-size: 11px;
			color: #FFF;
			background: #000;
			-moz-border-radius: 5px;
		}
		
		ul#output li a:hover {
			background: #D33431;
		}
	</style>
	<script language="javascript">
		$(document).ready(function() {

			$.featureList(
				$("#tabs li a"),
				$("#output li"), {
					start_item	:	0
				}
			);

			/*
			
			// Alternative

			
			$('#tabs li a').featureList({
				output			:	'#output li',
				start_item		:	1
			});

			*/

		});
	</script>
</head>
<body>
	<div id="content">
		<h1>Manager Comunio</h1>

		<p>Gestiona tu plantilla y configura tu once inicial cada jornada.</p>

		<hr />

		<div id="feature_list">
			<ul id="tabs">
				<li>
					<a href="javascript:;">
						<img src="imagenes/services.png" />
						<h3>Estado Plantilla</h3>
						<span>Puntuacion y estado</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="imagenes/user.png" />
						<h3>Acceso Usuarios</h3>
						<span>Gestiona tu plantilla</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="imagenes/applications.png" />
						<h3>Contacto</h3>
						<span>Contacta con nosotros</span>
					</a>
				</li>
			</ul>
			<ul id="output">
				<li>
					<img src="imagenes/puntuacion.jpg" />
					<a href="usuario.html">Consulta tu alineación</a>
				</li>
				<li>
					<img src="imagenes/estado.jpg" />
					<a href="usuario.html">Accede a tu cuenta</a>
				</li>
				<li>
					<img src="imagenes/contacto.jpg" />
					<a href="usuario.html">Contacta con nosotros</a>
				</li>
			</ul>

		</div>
	</div>
</body>
</html>